<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZHANG | 重新定义钢材管理</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet">
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet">

    <!-- 自定义样式 -->
    <style>
        /* 苹果风格导航栏 */
        .apple-navbar {
            background-color: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            height: 44px;
            color: #f5f5f7;
            font-size: 12px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }

        .apple-navbar a {
            color: #f5f5f7;
            opacity: 0.8;
            transition: opacity 0.3s;
        }

        .apple-navbar a:hover {
            opacity: 1;
        }

        /* 导航栏间距调整 - 新增代码 */
        .navbar-nav .nav-item {
            margin-right: 30px; /* 增大导航项之间的间距 */
        }

        .navbar-nav .nav-item:last-child {
            margin-right: 0; /* 最后一个导航项不需要右间距 */
        }

        /* 主标题样式 */
        .hero-title {
            font-size: 3rem;
            font-weight: bold;
            letter-spacing: -0.02em;
            margin-top: 1.5rem;
        }

        /* 副标题样式 */
        .hero-subtitle {
            font-size: 1.5rem;
            letter-spacing: -0.01em;
            margin-bottom: 1rem;
        }

        /* 自动播放图片轮播 */
        .apple-carousel {
            position: relative;
            height: 100vh;
            width: 100%;
            overflow: hidden;
        }

        .carousel-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: white;
        }

        .carousel-slide.active {
            opacity: 1;
        }

        .carousel-slide img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }

        .carousel-content {
            padding: 0 20px;
            max-width: 800px;
            margin: 0 auto;
            z-index: 1;
            transform: translateY(30px);
            opacity: 0;
            transition: transform 1s ease-out, opacity 1s ease-out;
            transition-delay: 0.5s;
        }

        .carousel-slide.active .carousel-content {
            transform: translateY(0);
            opacity: 1;
        }

        .carousel-title {
            font-size: 4rem;
            font-weight: bold;
            margin-bottom: 20px;
            letter-spacing: -0.02em;
        }

        .carousel-subtitle {
            font-size: 1.8rem;
            margin-bottom: 30px;
            letter-spacing: -0.01em;
        }

        .carousel-cta {
            display: flex;
            justify-content: center;
            gap: 50px;
        }

        .apple-btn {
            background-color: #0071e3;
            color: white;
            border-radius: 980px;
            padding: 10px 20px;
            font-size: 16px;
            font-weight: 500;
            transition: background-color 0.3s;
            text-decoration: none;
        }

        .apple-btn:hover {
            background-color: #147ce5;
            color: white;
            text-decoration: none;
        }

        .apple-link {
            color: #2997ff;
            font-size: 18px;
            transition: color 0.3s;
            text-decoration: none;
        }

        .apple-link:hover {
            color: #2997ff;
            text-decoration: underline;
        }

        /* 轮播指示器 */
        .carousel-indicators {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        .indicator-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .indicator-dot.active {
            background-color: white;
            width: 24px;
            border-radius: 4px;
        }

        /* 产品特点区域 */
        .feature-section {
            padding: 60px 0;
            background-color: #f5f5f7;
        }

        .feature-card {
            background-color: white;
            border-radius: 18px;
            padding: 30px;
            margin-bottom: 30px;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
        }

        .feature-icon {
            font-size: 3rem;
            color: #0071e3;
            margin-bottom: 20px;
        }

        .feature-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .feature-desc {
            color: #6e6e73;
        }

        /* 页脚样式 */
        .apple-footer {
            background-color: #f5f5f7;
            padding: 40px 0;
            border-top: 1px solid #d2d2d7;
        }

        .footer-link {
            display: block;
            color: #6e6e73;
            margin-bottom: 10px;
            font-size: 12px;
        }

        .footer-link:hover {
            color: #1d1d1f;
            text-decoration: underline;
        }

        .footer-title {
            font-weight: bold;
            margin-bottom: 15px;
            font-size: 12px;
        }

        /* 滚动动画 */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .fade-in.appear {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>

<body class="bg-white">
<!-- 苹果风格导航栏 -->
<nav class="apple-navbar navbar navbar-expand-lg navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="#">
            <i class="fa fa-steel"></i> ZHANG
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">产品</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">解决方案</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">案例</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">关于ZHANG</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">联系ZHANG</a>
                </li>
            </ul>

        </div>
    </div>
</nav>

<!-- 苹果风格自动播放轮播 -->
<div class="apple-carousel" id="appleCarousel">
    <!-- 轮播图片1 -->
    <div class="carousel-slide active">
        <img src="https://avatars.mds.yandex.net/i?id=02b1776c6f2fb2761fda6c05423ebd0d_l-5280263-images-thumbs&n=13" alt="智能钢材管理系统">
        <div class="carousel-content">
            <h2 class="carousel-title" style="color: #888888;">ZHANG钢材管理系统</h2>
            <p class="carousel-subtitle"style="color: #888888;">触手可及的管理系统</p>
            <div class="carousel-cta">
                <a href="#" class="apple-btn">了解更多 <i class="fa fa-cube"></i></a>
                <a href="#" class="apple-btn">观看演示 <i class="fa fa-play-circle-o"></i></a>
            </div>
        </div>
    </div>

    <!-- 轮播图片2 -->
    <div class="carousel-slide">
        <img src="https://cms.interestingengineering.com/wp-content/uploads/2024/06/iss056e201046large.jpg" alt="先进的数据分析">
        <div class="carousel-content">
            <h2 class="carousel-title"style="color:#07689f;">先进的数据分析</h2>
            <p class="carousel-subtitle">实时监控钢材库存、销售和质量数据</p>
            <div class="carousel-cta">
                <a href="#" class="apple-btn">了解更多 <i class="fa fa-cube"></i></a>
                <a href="#" class="apple-btn">查看数据 <i class="fa fa-bar-chart"></i></a>
            </div>
        </div>
    </div>

    <!-- 轮播图片3 -->
    <div class="carousel-slide">
        <img src="https://avatars.mds.yandex.net/i?id=f1b09bf6726eefc4cb49690100e23d8d_l-5888804-images-thumbs&n=13" alt="全方位服务支持">
        <div class="carousel-content">
            <h2 class="carousel-title"style="color: #537780;">全方位服务支持</h2>
            <p class="carousel-subtitle">提供专业的钢材管理咨询和技术支持</p>
            <div class="carousel-cta">
                <a href="#" class="apple-btn">了解更多 <i class="fa fa-cube"></i></a>
                <a href="#" class="apple-link">查看服务 <i class="fa fa-info-circle"></i></a>
            </div>
        </div>
    </div>

    <!-- 轮播指示器 -->
    <div class="carousel-indicators">
        <div class="indicator-dot active" data-index="0"></div>
        <div class="indicator-dot" data-index="1"></div>
        <div class="indicator-dot" data-index="2"></div>
    </div>
</div>

<!-- 产品特点区域 -->
<div class="feature-section">
    <div class="container">
        <div class="row">
            <div class="col-md-4 fade-in">
                <div class="feature-card text-center">
                    <div class="feature-icon">
                        <i class="fa fa-line-chart"></i>
                    </div>
                    <h3 class="feature-title">智能数据分析</h3>
                    <p class="feature-desc">通过AI技术分析钢材数据，提供精准的预测和决策支持。</p>
                </div>
            </div>
            <div class="col-md-4 fade-in" style="transition-delay: 0.1s;">
                <div class="feature-card text-center">
                    <div class="feature-icon">
                        <i class="fa fa-cogs"></i>
                    </div>
                    <h3 class="feature-title">全流程管理</h3>
                    <p class="feature-desc">覆盖钢材采购、生产、销售、库存的全生命周期管理。</p>
                </div>
            </div>
            <div class="col-md-4 fade-in" style="transition-delay: 0.2s;">
                <div class="feature-card text-center">
                    <div class="feature-icon">
                        <i class="fa fa-mobile"></i>
                    </div>
                    <h3 class="feature-title">移动办公</h3>
                    <p class="feature-desc">随时随地通过手机、平板等设备管理钢材业务。</p>
                </div>
            </div>
            <div class="col-md-4 fade-in" style="transition-delay: 0.3s;">
                <div class="feature-card text-center">
                    <div class="feature-icon">
                        <i class="	fa fa-check-square"></i>
                    </div>
                    <h3 class="feature-title">张力文</h3>
                    <p class="feature-desc">231603010625张力文.数据库设计作业</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚区域 -->
<footer class="apple-footer">
    <div class="container">
        <div class="row">


            <div class="row mt-4 pt-4 border-top">
                <div class="col-md-12 text-center">
                    <p class="text-muted small">© 2023 ZHANG钢材管理系统. 231603010625张力文.数据库设计作业.保留所有权利.</p>
                </div>
            </div>
        </div>
</footer>

<!-- JavaScript -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/bootstrap.bundle.min.js" th:src="@{/js/bootstrap.bundle.min.js}"></script>

<!-- 自动播放轮播脚本 -->
<script>
    $(document).ready(function() {
        // 自动播放轮播
        const carousel = $('#appleCarousel');
        const slides = carousel.find('.carousel-slide');
        const indicators = carousel.find('.indicator-dot');
        let currentIndex = 0;
        let slideInterval;

        // 初始化轮播
        function initCarousel() {
            // 设置自动播放
            startSlideShow();

            // 点击指示器切换图片
            indicators.on('click', function() {
                const index = $(this).data('index');
                goToSlide(index);
                resetSlideShow();
            });
        }

        // 切换到指定图片
        function goToSlide(index) {
            // 移除当前活动状态
            slides.eq(currentIndex).removeClass('active');
            indicators.eq(currentIndex).removeClass('active');

            // 设置新的活动状态
            currentIndex = index;
            slides.eq(currentIndex).addClass('active');
            indicators.eq(currentIndex).addClass('active');
        }

        // 下一张图片
        function nextSlide() {
            let nextIndex = currentIndex + 1;
            if (nextIndex >= slides.length) {
                nextIndex = 0;
            }
            goToSlide(nextIndex);
        }

        // 开始轮播
        function startSlideShow() {
            slideInterval = setInterval(nextSlide,5000);
        }

        // 重置轮播计时器
        function resetSlideShow() {
            clearInterval(slideInterval);
            startSlideShow();
        }

        // 滚动动画效果
        const fadeElements = document.querySelectorAll('.fade-in');

        const fadeInOnScroll = function() {
            for (let i = 0; i < fadeElements.length; i++) {
                const windowHeight = window.innerHeight;
                const elementTop = fadeElements[i].getBoundingClientRect().top;
                const elementVisible = 150;

                if (elementTop < windowHeight - elementVisible) {
                    fadeElements[i].classList.add('appear');
                }
            }
        };

        // 初始检查
        fadeInOnScroll();

        // 滚动时检查
        window.addEventListener('scroll', fadeInOnScroll);

        // 初始化轮播
        initCarousel();
    });
</script>
</body>
</html>
